<template>
    <div>
        <!--新增模板-->
        <el-form v-model="formObj" @submit.prevent="showData" label-width="80px">

          <el-form-item label="模板名称" label-width="80px">
            <el-input v-model="formObj.name" placeholder="请输入模板名称" size="medium" style="width: 20%"></el-input>
          </el-form-item>

          <el-form-item label="模板描述" label-width="80px">
            <el-input v-model="formObj.description" placeholder="请输入模板描述" size="medium"></el-input>
          </el-form-item>

          <!--<el-form-item label="搜索框数量" label-width="90px">
            <el-input v-model="formObj.searchVal" placeholder="请输入:0~20" size="medium" style="width: 20%"></el-input>
          </el-form-item>-->

          <el-form-item label="操作条件" label-width="80px">
            <el-checkbox-group v-model="formObj.buttonList">
                <el-checkbox label="查询" value="查询" border></el-checkbox>
                <el-checkbox label="新增" value="新增" border></el-checkbox>
                <el-checkbox label="修改" value="修改" border></el-checkbox>
                <el-checkbox label="删除" value="删除" border></el-checkbox>
              </el-checkbox-group>
          </el-form-item>

          <el-form-item label="返回列数量" label-width="90px">
            <el-input v-model="formObj.returnVal" placeholder="请输入:0~20" size="medium" style="width: 20%"></el-input>
          </el-form-item>

          <el-row v-for="item in formObj.returnList" :key="item.attrId">
              <el-col :span="5">
                  <el-form-item label="内容字段" >
                    <el-input size="medium" placeholder="请填写内容字段（英文）" v-model="item.attr">{{item.attr}}</el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="7">
                  <el-form-item label="内容描述">
                    <el-input size="medium" placeholder="请填写内容字段（中文）" v-model="item.attrCn">{{item.attrCn}}</el-input>
                  </el-form-item>
              </el-col>
              <el-col :span="8">
                  <el-form-item label="内容类型">
                    <!--<el-input size="medium"></el-input>-->
                    <el-select placeholder="请选择内容字段类型" v-model="item.type">
                      <el-option label="字符型" value="VARCHAR"></el-option>
                      <el-option label="数字型" value="NUMBER"></el-option>
                      <el-option label="日期型" value="DATE"></el-option>
                      <el-option label="大文本" value="CLOB"></el-option>
                      <el-option label="文件" value="FILE"></el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
              <el-col :span="4">
                  <el-form-item label="查询字段">
                    <!--<el-input size="medium"></el-input>-->
                    <el-select placeholder="" v-model="item.ifSearch">
                      <el-option label="是" value="yes"></el-option>
                      <el-option label="否" value="no"></el-option>
                    </el-select>
                  </el-form-item>
              </el-col>
          </el-row>
          <el-form-item>
              <el-button v-model="formObj.id" type="primary" @click="updateTemplate(formObj.id)">保存</el-button>
          </el-form-item>
        </el-form>
    </div>
</template>
<script>
export default {
  name: 'updateTemplate',
  data() {
    return {
      val: '',
      formObj:{
        "id": "",
        "name": "",
        "description": "",
        "searchVal": 0,
        "buttonList": [],
        "returnVal": 0,
        "returnList":[]
      }

    };
  },
  watch:{

  },
  methods: {
    updateTemplate(id){
      console.log(JSON.stringify(this.formObj));
      this.$http.put('http://127.0.0.1:8080/template/'+ id, this.formObj).then(function(result){
                var body = result.body
                if (body.success === true) {
                   return
                }
                },function(result){
                   alert(result.status)
                });
    }
  },
  created (){//无法在这里面直接调用method中的方法
      this.$http.get('http://127.0.0.1:8080/template/'+this.$route.params.templateId).then(function(result){
          var body = result.body
          if (body.success === true) {
              var data = body.payload
              var  searchArray = data.searchList
              var  buttonArray = data.dealList
              var  tableArray = data.tableList

              this.formObj.id = data.id
              this.formObj.name = data.name
              this.formObj.description = data.description
              this.formObj.searchVal = searchArray.split(",").length
              this.formObj.returnList = data.returnList

              var a = []
              buttonArray.split(",").forEach((item) => {
                 a.push(item);
              })
              this.formObj.buttonList = a
              this.formObj.returnVal = tableArray.split(",").length


              console.log(this.formObj)
          }
          },function(result){
             alert(result.status)
          });
   }
};
</script>
